<template>
	<view>
		<Setps v-if="!titleshow" :num='1' :headtitle='tit[1].name' :tit='tit' />
		<u-form labelPosition="left" :model="infmodel" :rules="rules" ref="userform">
			<view class="formcard">
				<view class="bodtitle">
					<p><b>行程反馈</b></p>
				</view>
				<view class="bodtitle">
					<p style='font-size: 32rpx;'>去程</p>
				</view>
				<!-- 出差人 -->
				<u-form-item labelWidth="150rpx" label="出差人" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.name">
				</u-form-item>

				<!-- 去程日期 -->
				<u-form-item required labelWidth="150rpx" label="去程日期" prop="userInfo.date" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.date">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 去程交通 -->
				<u-form-item required labelWidth="150rpx" label="去程交通" prop="userInfo.bus" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.bus">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 出发地点 -->
				<u-form-item required labelWidth="150rpx" label="出发地点" prop="userInfo.origin" borderBottom ref="item1">
					<input class="pdlf" type="text" v-model="infmodel.userInfo.origin">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 到达地点 -->
				<u-form-item required labelWidth="150rpx" label="到达地点" prop="userInfo.finish"  ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.finish">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			
			<!-- //返程 -->
			<view class="formcard">
				<view class="bodtitle">
					<p style='font-size: 32rpx;'>返程</p>
				</view>
			
				<!-- 返程日期 -->
				<u-form-item required labelWidth="150rpx" label="返程日期" prop="userInfo.date" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.date">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			
				<!-- 返程交通 -->
				<u-form-item required labelWidth="150rpx" label="返程交通" prop="userInfo.bus" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.bus">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			
				
			
				<!-- 出发地点 -->
				<u-form-item required labelWidth="150rpx" label="出发地点" prop="userInfo.finish" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="infmodel.userInfo.finish">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<!-- 到达地点 -->
				<u-form-item required labelWidth="150rpx" label="到达地点" prop="userInfo.origin" ref="item1">
					<input class="pdlf" type="text" v-model="infmodel.userInfo.origin">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
			</view>
		</u-form>
		
		<view v-if="!titleshow" class="uolod">
			<p  style='width: 90%;margin: 30rpx auto;margin-bottom: 30rpx;'>
				<!-- <u-button type="primary" :plain="true" icon="map" text="上传附件"></u-button> -->
				<view class="update">
					<p>
						<image src="@/static/newimg/tJ.svg"></image>
						<span style='color: #007aff;padding-left: 10rpx;'>添加反馈行程</span>
					</p>
				</view>
			</p>
		</view>
		
		<Nextbtn v-if="!titleshow" @child='parent' :backtitle='backtitle' :nexttitle='nexttitle' :next='next' />
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	import Nextbtn from '@/workspaces/tools/nextbtn.vue'
	export default {
		// titleshow控制步进器显示隐藏
		props:['titleshow'],
		data() {
			return {
				tit: [{
						name: '基本信息'
					},
					{
						name: '行程反馈'
					},
					{
						name: '费用明细'
					},
					{
						name: '确认提交'
					},
				],
				infmodel: { //用户信息
					userInfo: {
						name: '张三',
						date: '2021-9-11~2022-1-1',
						bus: '灰机',
						origin: '广州市白云区机场大道',
						finish: '上海市静安区延平路'
					}
				},
				rules: {

				},
				backtitle:'上一步(基本信息)',
				nexttitle:'下一步(费用明细)',
				next:'./cost',
				
			}
		},
		methods: {
			parent(){
				console.log(1111)
			}
		},
		components: {
			Setps,
			Nextbtn
		}
	}
</script>

<style scoped lang="scss">
	view{
		font-family: pf;
	}
	.pdlf {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
	}
	.uolod{
		width: 90%;
		height: 150rpx;
		display:flex;
		align-items: center;
		margin: 0 auto;
		margin-bottom: 50rpx;
		font-size:30rpx;
		background-color: white;
		border-radius: 8px;
	}
	.update {
			width: 100%;
			height: 80rpx;
			border: 1px solid #007aff;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			p {			
				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: bottom;
				}
			}
		}
</style>
